<template>
  <div id="main">
    <el-container >
      <el-aside width="30%">
        <div id="logoBox">
          <img src="../../assets/img/logo.png" alt="" height="30">
        </div>
        <div id="loginBox">
          <p class="logMsg">登录到 <br>QIANYA Office Automation</p>
          <el-form>
            <el-form-item label="">
              <el-input type="text" v-model="query2.username" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item label="">
              <el-input  v-model="query2.password" placeholder="请输入密码"  show-password/>
            </el-form-item>
            <el-button type="primary" @click="login">登陆</el-button>
          </el-form>
        </div>
      </el-aside>
      <el-main>
        <img src="../../assets/img/login.png" alt="" height="850">
      </el-main>

    </el-container>
  </div>

</template>
<script setup lang="ts">
import {useRouter} from "vue-router";
import {ref} from "vue";
import {loginApi} from "../../api/login";
import {useUsersStore} from "../../store/userInfo.ts";
import {ElMessage} from 'element-plus'

const store = useUsersStore();
const { name, role, token } = store;
const router = useRouter()
let query2=ref({
  username:'',
  password:'',
  rememberMe:false,
})
let show = ref(false);
let errorMessage = ref<any>()
const login = async () => {
  if (query2.value.username == ''||query2.value.password == ''){
    ElMessage.error("请输入账号和密码")
    return;
  }
  const res = await loginApi(
      {username:query2.value.username , password:query2.value.password, rememberMe:query2.value.rememberMe});
  if (res.code==200){
    store.token = res.data.token;
    store.role = res.data.role;
    ElMessage.success("登录成功")
    await router.push("/staging")
  }else{
    ElMessage.error(res.msg)
  }

}
</script>
<style scoped>
#main{
  width:100%;
  height:100vh;
}
#main>>>.el-main{
  background-color:#F8F8FF;
  //background-image:url("../../assets/img/login.png")
}
#main>>>.el-container{
  height: 100vh;
}
#main>>>.el-aside{
  overflow: hidden;
  width: 50vh;
}
#loginBox{
  text-align: center;
  width:100%;
  padding:25vh 10vh;
}
#loginBox>>>.el-form{
  width:29vh;
}
#loginBox>>>.el-button{
  width: 29vh;
}
.logMsg{
  text-align: left;
  font-size: 1.5rem;
  font-weight:450;
  width: 50vh;
  margin:10% 0;
  word-wrap: break-word;
}
#logoBox{
 display: inline-block;
  float: left;
  padding:2% 3%;
}
</style>
